<template>
	<view class="translate-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-left" @tap="goBack">
				<text class="back-text">‹</text>
			</view>
			<text class="nav-title">拍照翻译</text>
			<view class="nav-right"></view>
		</view>
		
		<!-- 相机预览区域 -->
		<view class="camera-section">
			<view class="camera-preview" v-if="!hasImage">
				<view class="camera-placeholder">
					<image src="/static/camera.svg" class="camera-icon"></image>
					<text class="camera-text">点击拍照开始翻译</text>
				</view>
			</view>
			
			<!-- 拍照后的图片显示 -->
			<view class="image-preview" v-if="hasImage">
				<image :src="capturedImage" class="preview-image" mode="aspectFit"></image>
				<view class="image-overlay">
					<view class="retake-btn" @tap="retakePhoto">
						<text class="retake-text">重拍</text>
					</view>
					<view class="translate-btn" @tap="startTranslate">
						<text class="translate-text">翻译</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 拍照按钮 -->
		<view class="camera-controls" v-if="!hasImage">
			<view class="control-buttons">
				<view class="album-btn" @tap="selectFromAlbum">
					<image src="/static/camera.svg" class="album-icon"></image>
					<text class="album-text">相册</text>
				</view>
				<view class="camera-btn" @tap="takePhoto">
					<view class="camera-btn-inner"></view>
				</view>
				<view class="placeholder"></view>
			</view>
		</view>
		
		<!-- 翻译结果区域 -->
		<view class="result-section" v-if="translationResult">
			<view class="result-header">
				<text class="result-title">翻译结果</text>
			</view>
			<view class="result-content">
				<text class="original-text">{{ originalText }}</text>
				<view class="divider"></view>
				<text class="translated-text">{{ translatedText }}</text>
			</view>
			<view class="result-actions">
				<view class="action-btn" @tap="copyResult">
					<text class="action-text">复制</text>
				</view>
				<view class="action-btn" @tap="shareResult">
					<text class="action-text">分享</text>
				</view>
			</view>
		</view>
		
		<!-- 加载状态 -->
		<view class="loading-overlay" v-if="isTranslating">
			<view class="loading-content">
				<view class="loading-spinner"></view>
				<text class="loading-text">正在翻译中...</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasImage: false,
				capturedImage: '',
				originalText: '',
				translatedText: '',
				translationResult: false,
				isTranslating: false
		}
	},
	onLoad() {
		// 页面加载时检查相机权限
		this.checkCameraPermission();
	},
		methods: {
			// 检查相机权限
			checkCameraPermission() {
				uni.getSetting({
					success: (res) => {
						console.log('权限设置:', res.authSetting);
						if (res.authSetting['scope.camera'] === false) {
							console.log('相机权限被拒绝');
						}
					}
				});
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 拍照
			takePhoto() {
				// 检查相机权限
				uni.getSetting({
					success: (res) => {
						if (res.authSetting['scope.camera'] === false) {
							// 用户拒绝了相机权限，引导用户开启
							uni.showModal({
								title: '需要相机权限',
								content: '拍照翻译功能需要访问您的相机，请在设置中开启相机权限',
								confirmText: '去设置',
								success: (modalRes) => {
									if (modalRes.confirm) {
										uni.openSetting({
											success: (settingRes) => {
												if (settingRes.authSetting['scope.camera']) {
													this.openCamera();
												}
											}
										});
									}
								}
							});
						} else {
							// 有权限或未询问过，直接调用相机
							this.openCamera();
						}
					}
				});
			},
			
			// 打开相机
			openCamera() {
				uni.chooseImage({
					count: 1,
					sourceType: ['camera'], // 优先使用相机
					sizeType: ['original'], // 使用原图，保证清晰度
					success: (res) => {
						console.log('拍照成功:', res);
						this.capturedImage = res.tempFilePaths[0];
						this.hasImage = true;
						this.translationResult = false;
						
						uni.showToast({
							title: '拍照成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.error('拍照失败:', err);
						let errorMsg = '拍照失败';
						
						if (err.errMsg.includes('cancel')) {
							errorMsg = '用户取消拍照';
						} else if (err.errMsg.includes('auth')) {
							errorMsg = '相机权限被拒绝';
						} else if (err.errMsg.includes('system')) {
							errorMsg = '系统错误，请重试';
						}
						
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			
			// 从相册选择
			selectFromAlbum() {
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					sizeType: ['original'],
					success: (res) => {
						console.log('选择图片成功:', res);
						this.capturedImage = res.tempFilePaths[0];
						this.hasImage = true;
						this.translationResult = false;
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 重新拍照
			retakePhoto() {
				this.hasImage = false;
				this.capturedImage = '';
				this.translationResult = false;
				this.originalText = '';
				this.translatedText = '';
			},
			
			// 开始翻译
			startTranslate() {
				if (!this.capturedImage) {
					uni.showToast({
						title: '请先拍照',
						icon: 'none'
					});
					return;
				}
				
				this.isTranslating = true;
				
				// 模拟OCR识别和翻译过程
				setTimeout(() => {
					// 模拟识别到的文本
					this.originalText = "Hello, how are you today?";
					// 模拟翻译结果
					this.translatedText = "你好，你今天怎么样？";
					
					this.translationResult = true;
					this.isTranslating = false;
					
					uni.showToast({
						title: '翻译完成',
						icon: 'success'
					});
				}, 2000);
			},
			
			// 复制结果
			copyResult() {
				uni.setClipboardData({
					data: this.translatedText,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success'
						});
					}
				});
			},
			
			// 分享结果
			shareResult() {
				uni.showActionSheet({
					itemList: ['分享到微信', '分享到朋友圈', '保存到相册'],
					success: (res) => {
						console.log('分享选择:', res.tapIndex);
						uni.showToast({
							title: '分享功能开发中',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	page {
		height: 100vh;
		background: #f8fafc;
	}
	
	.translate-container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}
	
	/* 导航栏样式 */
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20px 20px 10px 20px;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
	}
	
	.nav-left {
		width: 40px;
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
	}
	
	.back-text {
		font-size: 24px;
		font-weight: 700;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.nav-title {
		font-size: 18px;
		font-weight: 700;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.nav-right {
		width: 40px;
	}
	
	/* 相机区域样式 */
	.camera-section {
		flex: 1;
		margin: 20px;
		border-radius: 20px;
		overflow: hidden;
		background: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		position: relative;
	}
	
	.camera-preview {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.camera-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
	}
	
	.camera-icon {
		width: 80px;
		height: 80px;
		opacity: 0.7;
		filter: brightness(0) invert(1);
	}
	
	.camera-text {
		font-size: 16px;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.image-preview {
		width: 100%;
		height: 100%;
		position: relative;
	}
	
	.preview-image {
		width: 100%;
		height: 100%;
	}
	
	.image-overlay {
		position: absolute;
		bottom: 20px;
		left: 20px;
		right: 20px;
		display: flex;
		gap: 15px;
	}
	
	.retake-btn, .translate-btn {
		flex: 1;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 25px;
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
	}
	
	.retake-btn {
		background: rgba(255, 255, 255, 0.2);
	}
	
	.translate-btn {
		background: linear-gradient(135deg, #10b981 0%, #059669 100%);
	}
	
	.retake-btn:active, .translate-btn:active {
		transform: scale(0.95);
	}
	
	.retake-text, .translate-text {
		font-size: 16px;
		font-weight: 600;
		color: white;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	/* 拍照按钮样式 */
	.camera-controls {
		padding: 30px;
		display: flex;
		justify-content: center;
	}
	
	.control-buttons {
		display: flex;
		align-items: center;
		gap: 40px;
	}
	
	.album-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		padding: 15px;
		border-radius: 20px;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		transition: all 0.3s ease;
		min-width: 80px;
	}
	
	.album-btn:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 0.3);
	}
	
	.album-icon {
		width: 30px;
		height: 30px;
		filter: brightness(0) invert(1);
	}
	
	.album-text {
		font-size: 12px;
		color: white;
		font-weight: 500;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	}
	
	.camera-btn {
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.2);
		backdrop-filter: blur(10px);
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		border: 4px solid rgba(255, 255, 255, 0.3);
	}
	
	.camera-btn:active {
		transform: scale(0.9);
		background: rgba(255, 255, 255, 0.3);
	}
	
	.camera-btn-inner {
		width: 60px;
		height: 60px;
		border-radius: 50%;
		background: white;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	}
	
	.placeholder {
		width: 80px;
	}
	
	/* 翻译结果区域 */
	.result-section {
		margin: 20px;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20px;
		padding: 20px;
		backdrop-filter: blur(10px);
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	}
	
	.result-header {
		margin-bottom: 15px;
		padding-bottom: 10px;
		border-bottom: 1px solid #e5e7eb;
	}
	
	.result-title {
		font-size: 18px;
		font-weight: 700;
		color: #1f2937;
	}
	
	.result-content {
		margin-bottom: 20px;
	}
	
	.original-text, .translated-text {
		display: block;
		font-size: 16px;
		line-height: 1.6;
		margin-bottom: 10px;
		word-wrap: break-word;
	}
	
	.original-text {
		color: #6b7280;
		font-style: italic;
	}
	
	.translated-text {
		color: #1f2937;
		font-weight: 500;
	}
	
	.divider {
		height: 1px;
		background: #e5e7eb;
		margin: 15px 0;
	}
	
	.result-actions {
		display: flex;
		gap: 15px;
	}
	
	.action-btn {
		flex: 1;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		transition: all 0.3s ease;
	}
	
	.action-btn:active {
		transform: scale(0.95);
		opacity: 0.8;
	}
	
	.action-text {
		font-size: 14px;
		font-weight: 600;
		color: white;
	}
	
	/* 加载状态 */
	.loading-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;
	}
	
	.loading-content {
		background: white;
		border-radius: 20px;
		padding: 30px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
	}
	
	.loading-spinner {
		width: 40px;
		height: 40px;
		border: 4px solid #e5e7eb;
		border-top: 4px solid #667eea;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
	
	.loading-text {
		font-size: 16px;
		color: #1f2937;
		font-weight: 500;
	}
</style>
